<template>
  <div class="transfer-container">
    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <div class="search-form">
        <div class="search-row">
          <div class="search-item">
            <label>调拨单号：</label>
            <el-input
              v-model="formInline.MovingCode"
              placeholder="请输入"
              clearable
              class="search-input"
            />
          </div>
          <div class="search-item">
            <label>单据状态：</label>
            <el-select
              v-model="formInline.State"
              placeholder="请选择"
              clearable
              class="search-select warehouse-select"
            >
              <el-option label="草稿" value="草稿" />
              <el-option label="待审核" value="待审核" />
              <el-option label="驳回" value="驳回" />
              <el-option label="审核成功" value="审核成功" />
              <el-option label="已完成" value="已完成" />
            </el-select>
          </div>
          <div class="search-item">
            <label>出入库状态：</label>
            <el-select
              v-model="formInline.ChuRuState"
              placeholder="请选择"
              clearable
              class="search-select warehouse-select"
            >
              <el-option label="已出库" value="已出库" />
              <el-option label="已入库" value="已入库" />
              <el-option label="未出库" value="未出库" />
              <el-option label="未入库" value="未入库" />
            </el-select>
          </div>
          <div class="search-item">
            <label>调拨申请日：</label>
            <el-date-picker
              v-model="formInline.CreateStartTime"
              type="date"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              class="search-date"
            />
          </div>
        </div>
        <div class="search-actions">
          <el-button @click="resetSearch" class="reset-btn">重置</el-button>
          <el-button type="primary" @click="getdata()" class="query-btn">查询</el-button>
          <el-button @click="toggleAdvancedSearch" class="advanced-btn">高级搜索</el-button>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <div class="action-buttons">
        <el-button type="success" @click="AddWarehouse()" class="action-btn">
          <el-icon><Plus /></el-icon>
          新增
        </el-button>
        <el-button @click="handleDelete" class="action-btn">
          <el-icon><Delete /></el-icon>
          删除
        </el-button>
        <el-button @click="handleCopy" class="action-btn">
          <el-icon><CopyDocument /></el-icon>
          复制
        </el-button>
        <el-button @click="handleApprove" class="action-btn">
          <el-icon><Check /></el-icon>
          审核
        </el-button>
        <el-button @click="handleExport()" class="action-btn">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
        <el-button @click="refreshData" class="action-btn">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <el-table 
        :data="tableData" 
        style="width: 100%" 
        class="custom-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="⚙️" width="60" />
        <el-table-column prop="movingCode" label="调拨单号" width="150">
          <template #default="scope">
            <span class="transfer-number">{{ scope.row.movingCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="单据状态" width="120"/>
       
        <el-table-column prop="createTime" label="调拨申请日期" width="150">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="allotWarehouseType" label="调拨类型" width="120"/>
       
        
        <el-table-column prop="original_OutWarehouse" label="调出仓库" width="120"/>
      
        <el-table-column prop="original_InWarehouse" label="调入仓库" width="120"/>
      
        <el-table-column prop="chukuSate" label="出库状态" width="120">
          <template #default="scope">
            <el-tag 
              :type="getOutboundStatusType(scope.row.chukuSate)" 
              size="small"
              class="status-tag"
            >
              {{ scope.row.chukuSate || '未出库' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="rukuSate" label="入库状态" width="120">
          <template #default="scope">
            <el-tag 
              :type="getInboundStatusType(scope.row.rukuSate)" 
              size="small"
              class="status-tag"
            >
              {{ scope.row.rukuSate || '未入库' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="allotCount" label="调拨数量" width="120">
          <template #default="scope">
            <span class="quantity">{{ scope.row.allotCount || '10' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalPrice" label="调拨金额" width="120">
          <template #default="scope">
            <span class="amount">¥{{ scope.row.totalPrice || '500.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reviewer" label="经办人" width="120">
          <template #default="scope">
            <span>李依依</span>
          </template>
        </el-table-column>
        <el-table-column prop="productNames" label="调拨货品" width="200">
          <template #default="scope">
            <span class="product-names">{{ scope.row.productNames}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createUse" label="制单人" width="120">
         <template #default="scope">
              <span v-if="scope.row.createUse=='10032'">吴维昊</span>
              <span v-if="scope.row.createUse=='10036'">王雨龙</span>
              <span v-if="scope.row.createUse=='10037'">张可欣</span>
              <span v-if="scope.row.createUse=='10038'">赵姝雅</span>
              <span v-if="scope.row.createUse=='10039'">段栋兴</span>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="制单时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="reviewer" label="审核人" width="120"/>
        
        <el-table-column prop="audit_Time" label="审核时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.audit_Time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button 
              v-if="['草稿', '待审核', '驳回'].includes(scope.row.supplier_Name)"
              type="primary" 
              size="small" 
              @click="UpdateWarehouse(scope.row)"
              class="operation-btn"
            >
              编辑
            </el-button>
            <el-button 
              v-if="['草稿', '待审核', '驳回'].includes(scope.row.supplier_Name)"
              type="danger" 
              size="small" 
              @click="del(scope.row.id)"
              class="operation-btn"
            >
              删除
            </el-button>
            <el-button 
              v-if="['通过', '已完成'].includes(scope.row.supplier_Name)"
              type="warning" 
              size="small" 
              @click="handleRevoke(scope.row)"
              class="operation-btn"
            >
              撤销
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="page.PageIndex"
          v-model:page-size="page.PageSize"
          :page-sizes="[15, 20, 25, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          prev-text="上一页"
          next-text="下一页"
          :total="page.totalCount"
          class="custom-pagination"
        />
      </div>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="新增调拨单"
      width="500"
      class="custom-dialog"
    >
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item label="供应商编号" prop="">
          <el-input v-model="ruleForm.supplier_Number" disabled/>
        </el-form-item>
        
        <el-form-item label="供应商名称" prop="">
          <el-input v-model="ruleForm.supplier_Name" />
        </el-form-item>
        <el-form-item label="电话" prop="">
          <el-input v-model="ruleForm.phone" />
        </el-form-item>

        <el-form-item label="传真" prop="">
          <el-input v-model="ruleForm.fax" />
        </el-form-item>

        <el-form-item label="类型">
          <el-select
            v-model="ruleForm.supplier_Type"
            placeholder="请选择"
            clearable
          >
            <el-option label="合作供应商" value="合作供应商" />
            <el-option label="虚拟供应商" value="虚拟供应商" />
          </el-select>
        </el-form-item>

        <el-form-item label="邮箱" prop="">
          <el-input v-model="ruleForm.email" />
        </el-form-item>

        <el-form-item label="联系人" prop="">
          <el-input v-model="ruleForm.contacts" />
        </el-form-item>

        <el-form-item label="地址" prop="">
          <el-input v-model="ruleForm.address" />
        </el-form-item>

        <el-form-item label="描述" prop="">
          <el-input v-model="ruleForm.notes" type="textarea" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog
      v-model="updialogVisible"
      title="编辑调拨单"
      width="500"
      class="custom-dialog"
    >
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item label="供应商编号" prop="">
          <el-input v-model="ruleForm.supplier_Number" disabled/>
        </el-form-item>
        
        <el-form-item label="供应商名称" prop="">
          <el-input v-model="ruleForm.supplier_Name" />
        </el-form-item>
        <el-form-item label="电话" prop="">
          <el-input v-model="ruleForm.phone" />
        </el-form-item>

        <el-form-item label="传真" prop="">
          <el-input v-model="ruleForm.fax" />
        </el-form-item>

        <el-form-item label="类型">
          <el-select
            v-model="ruleForm.supplier_Type"
            placeholder="请选择"
            clearable
          >
            <el-option label="合作供应商" value="合作供应商" />
            <el-option label="虚拟供应商" value="虚拟供应商" />
          </el-select>
        </el-form-item>

        <el-form-item label="邮箱" prop="">
          <el-input v-model="ruleForm.email" />
        </el-form-item>

        <el-form-item label="联系人" prop="">
          <el-input v-model="ruleForm.contacts" />
        </el-form-item>

        <el-form-item label="地址" prop="">
          <el-input v-model="ruleForm.address" />
        </el-form-item>

        <el-form-item label="描述" prop="">
          <el-input v-model="ruleForm.notes" type="textarea" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="updatesubmitForm(ruleFormRef)">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { reactive,onMounted, ref, watch } from 'vue'
import { BasicsRed } from '@/http/axiosHelper'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { BasicsWrite } from '@/http/axiosHelper'
import { statementRed } from '@/http/axiosHelper'
import { 
  Plus, 
  Delete, 
  CopyDocument, 
  Check, 
  Download, 
  Refresh 
} from '@element-plus/icons-vue'

const router=useRouter();
const dialogVisible = ref(false)
const updialogVisible = ref(false)
const selectedRows = ref<any[]>([]);

function formatDate(dateStr: string) {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  if (isNaN(date.getTime())) return dateStr;
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  return `${y}-${m}-${d}`;
}

function formatDateTime(dateStr: string) {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  if (isNaN(date.getTime())) return dateStr;
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  const h = String(date.getHours()).padStart(2, '0');
  const min = String(date.getMinutes()).padStart(2, '0');
  const s = String(date.getSeconds()).padStart(2, '0');
  return `${y}-${m}-${d} ${h}:${min}:${s}`;
}

const AddWarehouse=()=>
{
   dialogVisible.value=true;
    ruleForm.supplier_Number= generateDateBasedNumber(),
  ruleForm.supplier_Name= "",
  ruleForm.notes= "",
  ruleForm.contacts="",
  ruleForm.address="",
  ruleForm.email="",
  ruleForm.phone="",
  ruleForm.supplier_Type="",
  ruleForm.phone=""
}

const UpdateWarehouse=(row:any)=>
{
   Object.assign(ruleForm,row);
updialogVisible.value=true
}

const updatesubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
   statementRed.post("basicswrite/api/Supplier/UpdateSupplierHandle",ruleForm).then(res=>
    {
        if(res.data.code==200)
    {
        ElMessage.success(res.data.msg);

       
     

  updialogVisible.value=false;
     getdata()
    }
    else
    {
            ElMessage.success(res.data.msg);
    }
    }
   )
    }
  })
}

// 改进版 - 添加持久化支持
const generateDateBasedNumber = (incrementLength: number = 4) => {
  const now = new Date();
  const datePart = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}`;
  
  // 从localStorage读取或初始化计数器
  const storageKey = `dateNumCounter_${datePart}`;
  let currentCount = localStorage.getItem(storageKey);
  
  // 如果localStorage中没有值，则初始化为0
  if (currentCount === null) {
    currentCount = '0';
  }
  
  // 转换为数字，递增，然后转回字符串
  const numericCount = parseInt(currentCount, 10) + 1;
  currentCount = numericCount.toString();
  
  // 保存新的计数器值
  localStorage.setItem(storageKey, currentCount);

  // 确保incrementLength是数字，然后生成递增部分
  const incrementPart = currentCount.padStart(incrementLength, '0');
  
  return datePart + incrementPart;
};

import {  type FormInstance, type FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    id:0,
   "supplier_Number": generateDateBasedNumber(),
  "supplier_Name": "",
  "supplier_Type": "",
  "phone": "",
  "fax": "",
  "email": "",
  "contacts": "",
  "address": "",
  "notes": ""
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  location: [
    {
      required: true,
      message: 'Please select a location',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
   statementRed.post("basicswrite/api/Supplier/Handle",ruleForm).then(res=>
    {
        if(res.data.code==200)
    {
        ElMessage.success(res.data.msg);

       
     ruleForm.supplier_Number= generateDateBasedNumber(),
  ruleForm.supplier_Name= "",
  ruleForm.notes= "",
  ruleForm.contacts="",
  ruleForm.address="",
  ruleForm.email="",
  ruleForm.phone="",
  ruleForm.supplier_Type="",
  ruleForm.phone=""

  dialogVisible.value=false;
getdata()
    }
    else
    {
            ElMessage.success(res.data.msg);
    }
    }
   )
    }
  })
}

const resetSearch = () => {
  formInline.MovingCode = '';
  formInline.State = '';
  formInline.ChuRuState = '';
  formInline.CreateStartTime = null;
  formInline.CreateEndTime = null;
  getdata();
};

const toggleAdvancedSearch = () => {
  // 高级搜索功能，可以根据需要扩展
  ElMessage.info('高级搜索功能待实现');
};

const refreshData = () => {
  getdata();
  ElMessage.success('数据已刷新');
};

const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection;
};

const handleDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的数据');
    return;
  }
  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedRows.value.length} 条记录吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 这里可以实现批量删除逻辑
    ElMessage.success('批量删除功能待实现');
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

const handleCopy = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要复制的数据');
    return;
  }
  ElMessage.info('复制功能待实现');
};

const handleApprove = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要审核的数据');
    return;
  }
  ElMessage.info('审核功能待实现');
};

const handleRevoke = (row: any) => {
  ElMessageBox.confirm(
    `确定要撤销调拨单 "${row.supplier_Number}" 吗？`,
    '确认撤销',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('撤销成功');
    getdata();
  }).catch(() => {
    ElMessage.info('已取消撤销');
  });
};

const getStatusType = (status: string) => {
  switch (status) {
    case '草稿':
      return 'info';
    case '待审核':
      return 'warning';
    case '驳回':
      return 'danger';
    case '通过':
      return 'success';
    case '已完成':
      return 'success';
    default:
      return 'info';
  }
};

const getOutboundStatusType = (status: string) => {
  switch (status) {
    case '已出库':
      return 'success';
    case '部分出库':
      return 'warning';
    case '未出库':
      return 'info';
    default:
      return 'info';
  }
};

const getInboundStatusType = (status: string) => {
  switch (status) {
    case '已入库':
      return 'success';
    case '部分入库':
      return 'warning';
    case '未入库':
      return 'info';
    default:
      return 'info';
  }
};

const formInline = reactive({
  MovingCode: '',
  State: '',
  ChuRuState: '',
  CreateStartTime: null,
  CreateEndTime: null,
})

const page=reactive({
    PageIndex:1,
    PageSize:15,
    totalCount:0
})

watch(page,()=>
{
  getdata();
})

onMounted(()=>
{
    delparmentdata();
    getdata();
})

const del=(id:any)=>
{
ElMessageBox.confirm(
    '确认删除吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
     statementRed.put("basicswrite/api/Supplier/DelSupplierHandle",{id:id}).then(res=>
{
   if(res.data.code==200)
   {
    ElMessage.success("删除成功");
    getdata();
   }
   else
   {
    ElMessage.success("删除失败");
   }
}
)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

const page2=reactive({
    PageIndex:1,
    PageSize:100,
    totalCount:0
})

const deplarment=ref()
const delparmentdata=()=>
{
    BasicsRed.get("basicsread/api/Deparment/GetDepartmentHandle",{params:{PageIndex:page2.PageIndex,PageSize:page2.PageSize}}).then(res=>
        {
            deplarment.value=res.data.data
        }
    )
}

const tableData=ref([]);

const getdata=()=>
{
    BasicsRed.get("/api/WorkOrder/InventoryTransferHandle",{params:{
      PageIndex:page.PageIndex,
      PageSize:page.PageSize,
      MovingCode:formInline.MovingCode,
      ChuRuState:formInline.ChuRuState,
      CreateEndTime:formInline.CreateEndTime,
      State:formInline.State,
      CreateStartTime:formInline.CreateStartTime
    }}).then(res=>
        {
tableData.value=res.data.data
page.totalCount=res.data.totalCount
        }
    )
}

// 导出函数（假设已配置 Axios 拦截器自动添加 Token）
async function handleExport() {
    try {
        // 1. 调用后端导出接口（GET 请求，参数通过 params 传递）
        const response = await BasicsRed({
            url: '/api/WorkOrder/InventoryTransferExport', // 后端接口地址
            method: 'GET',
            params: {
                        PageIndex:page.PageIndex,
                        PageSize:page.PageSize,
                        MovingCode:formInline.MovingCode,
                        ChuRuState:formInline.ChuRuState,
                        CreateEndTime:formInline.CreateEndTime,
                        State:formInline.State,
                        CreateStartTime:formInline.CreateStartTime
            }, // 对应后端 [FromQuery] 的 command 参数
            responseType: 'blob', // 关键：指定响应类型为二进制流（Excel 文件）
        });

        // 2. 从响应头获取文件名（后端通过 File 方法设置的 fileName）
        const fileName = getFileNameFromHeaders(response.headers);

        // 3. 生成下载链接并触发下载
        const blob = new Blob([response.data], {
            type: response.headers['content-type'] || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName; // 文件名从响应头获取或自定义
        document.body.appendChild(a);
        a.click();

        // 4. 清理资源
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);

    } catch (error: any) {
        // 处理错误（如后端返回 401/400 等）
        console.error('导出失败：', error.response?.data || error.message);
        alert('导出失败，请检查参数或重新登录');
    }
}

// 辅助函数：从响应头提取文件名（后端通过 File 方法设置）
function getFileNameFromHeaders(headers: any) {
    const contentDisposition = headers['content-disposition'] || headers['Content-Disposition'];
    if (!contentDisposition) return '调拨单管理.xlsx'; // 默认文件名

    // 解码文件名（处理中文编码问题）
    const match = contentDisposition.match(/filename\*?=([^;]+)/);
    if (match) {
        return decodeURIComponent(match[1].replace(/["']/g, ''));
    }
    return '调拨单管理.xlsx';
}

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style scoped>
/* 主容器 */
.transfer-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

/* 搜索筛选区域 */
.search-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.search-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  flex: 0 0 auto;
}

.search-item label {
  font-size: 16px;
  color: #2c3e50;
  font-weight: 500;
  white-space: nowrap;
}

.search-input .el-input__inner,
.search-select .el-select__input,
.search-date .el-date-editor .el-input__inner {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  padding: 8px 12px;
  font-size: 14px;
  color: #2c3e50;
}

.search-input .el-input__inner:focus,
.search-select .el-select__input:focus,
.search-date .el-date-editor .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.search-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

.reset-btn,
.query-btn,
.advanced-btn {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.reset-btn {
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.reset-btn:hover {
  background: #ebeef5;
  border-color: #c0c4cc;
  color: #303133;
}

.query-btn {
  background: linear-gradient(135deg, #28a745, #20c997);
  border: none;
  color: white;
}

.query-btn:hover {
  background: linear-gradient(135deg, #218838, #1e7e34);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.advanced-btn {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  color: #1890ff;
}

.advanced-btn:hover {
  background: #bae7ff;
  border-color: #69c0ff;
  color: #40a9ff;
}

/* 操作按钮区域 */
.action-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.action-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.action-btn {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.action-btn.el-button--success {
  background: linear-gradient(135deg, #28a745, #20c997);
}

.action-btn.el-button--success:hover {
  background: linear-gradient(135deg, #218838, #1e7e34);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.action-btn.el-button--danger {
  background: linear-gradient(135deg, #dc3545, #c82333);
}

.action-btn.el-button--danger:hover {
  background: linear-gradient(135deg, #c82333, #bd2130);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.action-btn.el-button--info {
  background: linear-gradient(135deg, #17a2b8, #138496);
}

.action-btn.el-button--info:hover {
  background: linear-gradient(135deg, #138496, #117084);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.action-btn.el-button--warning {
  background: linear-gradient(135deg, #ffc107, #e0a800);
}

.action-btn.el-button--warning:hover {
  background: linear-gradient(135deg, #e0a800, #d39e00);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

/* 数据表格区域 */
.table-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.table-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 表格样式 */
.custom-table {
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
}

.custom-table :deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.custom-table :deep(.el-table__header) {
  color: #2c3e50;
  font-weight: 600;
}

.custom-table :deep(.el-table__body) {
  color: #2c3e50;
}

.custom-table :deep(.el-table__row) {
  color: #2c3e50;
  transition: all 0.3s ease;
}

.custom-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.custom-table :deep(.el-table__row:nth-child(even)) {
  background-color: #fafbfc;
}

/* 表格数据样式 */
.transfer-number {
  font-weight: 600;
  color: #28a745;
  font-size: 14px;
  cursor: pointer;
}

.transfer-number:hover {
  color: #218838;
  text-decoration: underline;
}

.product-names {
  font-size: 14px;
  color: #606266;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.quantity {
  font-weight: 600;
  color: #409eff;
  font-size: 14px;
}

.amount {
  font-weight: 600;
  color: #67c23a;
  font-size: 14px;
}

.status-tag {
  font-weight: 500;
  border-radius: 4px;
}

.operation-btn {
  margin: 0 2px;
  border-radius: 4px;
  font-size: 12px;
  padding: 4px 8px;
}

.operation-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 20px 0;
}

.custom-pagination {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 8px 16px;
}

/* 弹窗样式 */
.custom-dialog {
  border-radius: 16px;
  overflow: hidden;
}

.custom-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 20px;
}

.custom-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
}

.custom-dialog :deep(.el-dialog__body) {
  padding: 30px;
}

.custom-dialog :deep(.el-form-item__label) {
  font-weight: 500;
  color: #2c3e50;
}

.custom-dialog :deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
}

.custom-dialog :deep(.el-input__inner:focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .transfer-container {
    padding: 16px;
  }

  .search-row {
    flex-direction: column;
    gap: 15px;
  }

  .search-item {
    width: 100%;
  }

  .action-buttons {
    justify-content: center;
    gap: 8px;
  }

  .action-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .search-actions {
    flex-direction: column;
    gap: 8px;
  }

  .reset-btn,
  .query-btn,
  .advanced-btn {
    width: 100%;
  }

  .action-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .action-btn {
    width: 100%;
    padding: 8px 16px;
  }

  .custom-table :deep(.el-table__body-wrapper) {
    overflow-x: auto;
  }
}

/* 下拉框宽度样式 */
.warehouse-select {
  min-width: 200px;
  width: 100%;
}

.warehouse-select :deep(.el-input__wrapper) {
  min-width: 200px;
}

.warehouse-select :deep(.el-input__inner) {
  min-width: 200px;
}

/* 确保下拉框有足够的z-index */
.search-select :deep(.el-select-dropdown) {
  z-index: 3000;
}

/* 移除原有的样式 */
.demo-form-inline .el-input {
  --el-input-width: 120px;
}

.demo-form-inline .el-select {
  --el-select-width: 120px;
}
</style>